<template>
	<view>
		<view class="box-bg">
<<<<<<< HEAD
			<uni-nav-bar :fixed='true' left-icon="left" @clickLeft='handleBack' right-icon="search" title="驾驶员管理"
				height="65px" color="#fff" backgroundColor="#00aaff" />
		</view>
		<view>
			<up-list @scrolltolower="scrolltolower">
				<up-list-item v-for="(item, index) in indexList" :key="item.id" @click="handleClickItem(item)">
					<uni-section>
						<up-cell-group :customStyle='groupStyle'>

							<view class="car-list">
								<view class="car-list-item">
									<!-- 名字电话flex横向布局 -->
									<view class="car-list-item-row">
										<view class="car-list-item-row-name">
											张三
										</view>
										<view class="car-list-item-row-phone">
											大众-迈腾
										</view>
									</view>

									<view class="car-list-item-content-title">
										省委办公厅
									</view>

									<view class="car-list-item-content-tags">


										<view class="car-list-item-content-tags-item" v-for="(item,index) in 3"
											:key="index">
											<text>省委组织部</text>
										</view>
									</view>

								</view>
							</view>

						</up-cell-group>
					</uni-section>
				</up-list-item>
			</up-list>
=======
				<uni-nav-bar :fixed='true' @clickLeft='handleBack' height="65px" color="#fff" backgroundColor="#00aaff">
					<template #left>
						<view class="u-nav-slot">
							<up-icon name="arrow-left" color="#fff" size="16"></up-icon>
							<up-text class="u-nav-text" text="车辆处置" color="#fff"></up-text>
						</view>
				
					</template>
					
				
				</uni-nav-bar>
>>>>>>> adf3579609b184176966be2fb807c0d7693231a1
		</view>
		<uni-section>
			<up-cell-group :customStyle='groupStyle'>
				<up-cell icon="setting-fill" isLink @click="handleUnits" title="车辆处置申请">
					<template #value>
						<text class="u-slot-value">20</text>
					</template>
				</up-cell>
				<up-cell icon="integral-fill" isLink @click="handleDriver" title="车辆主管部门确认">
					<template #value>
						<text class="u-slot-value">13</text>
					</template>
				</up-cell>
			</up-cell-group>
		</uni-section>
		<uni-section>
			<up-cell-group :customStyle='groupStyle'>
				<up-cell icon="setting-fill" isLink title="车辆调剂" @click="handleCar1">
					
				</up-cell>
				<up-cell icon="setting-fill" isLink title="车辆拍卖" @click="handleCar2">
					
				</up-cell>
				<up-cell icon="setting-fill" isLink title="车辆报废" @click="handleCar3">
					
				</up-cell>
			</up-cell-group>
		</uni-section>
		

	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted
	} from 'vue';
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app';

	const indexList = ref([]);
	const urls = [
		'https://uview-plus.jiangruyi.com/album/1.jpg',
		'https://uview-plus.jiangruyi.com/album/2.jpg',
		'https://uview-plus.jiangruyi.com/album/3.jpg',
		'https://uview-plus.jiangruyi.com/album/4.jpg',
		'https://uview-plus.jiangruyi.com/album/5.jpg',
		'https://uview-plus.jiangruyi.com/album/6.jpg',
		'https://uview-plus.jiangruyi.com/album/7.jpg',
		'https://uview-plus.jiangruyi.com/album/8.jpg',
		'https://uview-plus.jiangruyi.com/album/9.jpg',
		'https://uview-plus.jiangruyi.com/album/10.jpg',
	];
	const groupStyle = ref({
		'background-color': '#fff'
	});

	onLoad(() => {
		loadmore();
	});

	const scrolltolower = () => {
		loadmore();
	};

	const loadmore = () => {
		for (let i = 0; i < 30; i++) {
			indexList.value.push({
				url: urls[uni.$u.random(0, urls.length - 1)],
				id: i
			});
		}
	};

	function handleBack() {
		uni.navigateBack();
	}
	function handleUnits(){
		uni.navigateTo({
			url: '/pages/manager/handle/apply/index'
		})
	}
	function handleDriver(){
		uni.navigateTo({
			url: '/pages/manager/handle/confirm/index'
		})
	}
	function handleCar1(){
		uni.navigateTo({
			url: '/pages/manager/handle/prescription/index'
		})
	}
	function handleCar2(){
		uni.navigateTo({
			url: '/pages/manager/handle/auction/index'
		})
	}
	function handleCar3(){
		uni.navigateTo({
			url: '/pages/manager/handle/scrap/index'
		})
	}
	//  点击列表项
	function handleClickItem(item) {
		console.log(item);
		// 跳转到详情页 并传递列表id
		uni.navigateTo({
			url: '/pages/manager/car/detail/index?id=' + item.id
		})

	}
</script>

<style lang="scss" scoped>
	.car-list {
		padding: $uni-spacing-row-lg;

		&-item {

			&-row {


				display: flex;
				justify-content: space-between;
				color: #333;
				font-size: 15px;

				&-phone {
					font-size: 13px;
					color: #797E84;
				}
			}


			&-content {
				flex: 1;
				margin-left: $uni-spacing-row-lg;

				&-title {
					font-size: 15px;

					color: #333;
				}

				&-desc {
					margin-top: $uni-spacing-row-lg ;
					font-size: 13px;
					color: #999;
				}

				&-tags {
					display: flex;
					flex-wrap: wrap;
					margin-top: $uni-spacing-row-lg;
					font-size: 13px;
					color: #999;

					&-item {
						margin-bottom: $uni-spacing-row-sm;
						margin-right: $uni-spacing-row-lg;
						padding: $uni-spacing-row-sm $uni-spacing-row-lg;
						background-color: #E8EBEE;
						border-radius: 15px;
					}
				}

				&-location {
					display: flex;
					align-items: center;
					font-size: 13px;
					color: #999;
					margin-top: $uni-spacing-row-sm;
				}


			}
		}
	}
	.u-slot-value {
		background-color: #FFB44A;
		border-radius: 50%;
		padding: 5px;
		color: $uni-text-color-inverse;
	}
	.box-bg {
		:deep(.uni-navbar__header-btns, .uni-navbar__header-btns-right) {
			width: 200px !important;
		}
		.u-nav-slot {
			width: 300px;
			display: flex;
	
			.u-nav-text {
				font-size: 15px;
				color: #fff;
				position: relative;
				margin-right: 10px;
	
				
			}
		}
	}
</style>